<template>
  <div class="app-container calendar-list-container">
   <div class="filter-container">
     <el-select  style="width: 140px" class="filter-item" v-model="search.search_type" placeholder="搜索类型🔍" >
        <el-option label="营业点搜索" value='1'></el-option>
        <el-option label="区域搜索" value='2'></el-option>
        <el-option label="联系人/电话" value='3'></el-option>
      </el-select>
      <el-input @keyup.enter.native="handleFilter" style="width: 280px;" class="filter-item" placeholder="按营业点名称/联系人/电话 搜索" v-model="search.outlet_info"></el-input>
      <el-select @change='handleFilter' style="width: 140px" class="filter-item" v-model="search.status" placeholder="按营业状态搜索" >
        <el-option label="全部" value=''></el-option>
        <el-option label="正常营业" value='1'></el-option>
        <el-option label="暂停营业" value='2'></el-option>
      </el-select>
      <el-select  style="width: 140px" class="filter-item" v-model="search.islocal" placeholder="经营类型" @change='handleFilter'>
        <el-option label="全部" value=''></el-option>
        <el-option label="自营店" value='1'></el-option>
        <el-option label="加盟店" value='2'></el-option>
      </el-select>
      <el-button class="filter-item" type="primary" plain v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" v-waves type="primary" v-roles="'editOutlet'"  icon="el-icon-edit">添加营业点</el-button>
    </div>
    <!-- // 这是列表 -->
    <el-table :data="listData" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%">
      <el-table-column type="index"  align="center" label="序号" width="80"></el-table-column>
      <el-table-column align="center" label="营业点照片">
        <template slot-scope="scope">
          <span>
            <img :src="scope.row.unit_thumb" style="width:60px;height:80px" onerror='this.src="http://wx.qlogo.cn/mmopen/C2rEUskXQiblFYMUl9O0G05Q6pKibg7V1WpHX6CIQaic824apriabJw4r6EWxziaSt5BATrlbx1GVzwW2qjUCqtYpDvIJLjKgP1ug/0"' />
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="营业点名称">
        <template slot-scope="scope">
          <span>{{scope.row.hotel_name}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="归属(区)">
        <template slot-scope="scope">
          <span>{{scope.row.area_name}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="详细地址">
        <template slot-scope="scope">
          <span>{{scope.row.address}}</span>
        </template>
       </el-table-column>
     
        <el-table-column align="center" label="联系人" width="180px">
        <template slot-scope="scope">
          <span>{{scope.row.link_name}}</span>
          <span v-if="scope.row.link_phone">( {{scope.row.link_phone}} )</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="起送费" width="100px">
        <template slot-scope="scope">
          <span style="color:red">{{scope.row.min_amount}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="配送费" width="100px">
        <template slot-scope="scope">
          <span style="color:red">{{scope.row.carry_amount}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="最低提现额" width="100px">
        <template slot-scope="scope">
          <span style="color:red">{{scope.row.min_withdraw}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" width="100px">
        <template slot-scope="scope">
          <el-button size="mini" :type="scope.row.status | statusFilter" plain @click="handleModifyStatus(scope.row)">{{scope.row.status | statusName}}</el-button>
        </template> 
      </el-table-column>
      <el-table-column align="center" label="朋友圈" width="100px">
        <template slot-scope="scope">
          <el-button :type="scope.row.open_publish | statusFilter" size="mini" plain @click="publishState(scope.row)">{{scope.row.open_publish | publishName}}</el-button>
        </template> 
      </el-table-column>
      <el-table-column align="center" label="付款方式" width="100px">
        <template slot-scope="scope">
          <el-tag type="danger">{{scope.row.payment_type | paymentType}}</el-tag>
        </template> 
      </el-table-column>
      <el-table-column align="center" label="可配送范围" width="100px">
        <template slot-scope="scope">
          <el-tag type="info">{{scope.row.range_visual}} 米</el-tag>
        </template> 
      </el-table-column>
      <!-- //这里是操作   -->
      <el-table-column align="center" fixed="right" label="操作" width="210" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handlEdit(scope.row)" v-roles="'editOutlet'">编辑</el-button>
          <el-button size="mini" type="danger" @click="handlDel(scope.row)" v-roles="'deleteOutlet'">删除</el-button>
          <el-button size="mini" plain type="primary" icon="el-icon-download" v-if="scope.row.symbol_num !=0" @click="downCodeZip(scope.row)" v-roles="'downCodeZip'">下载码</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>

    <!--可自定义按钮的样式、show/hide临界点、返回的位置  -->
    <!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素  -->
    <el-tooltip placement="top" content="回到顶部">
      <back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
    </el-tooltip>
    
  </div>
</template>

<script>

import BackToTop from '@/components/BackToTop' // 回到顶部
import * as api from '@/api/main-api' // API
import waves from '@/directive/waves' // 水波纹指令
import { mapGetters } from 'vuex'

export default {
  name: 'adminUser',

  directives: {
    waves
  },

  components: { BackToTop },
  data() {
    return {
      // 回到顶部样式
      myBackToTopStyle: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        'z-index': '9999',
        'border-radius': '4px',
        'line-height': '45px', // 请保持与高度一致以垂直居中 Please keep consistent with height to center vertically
        background: '#e7eaf1'// 按钮的背景颜色 The background color of the button
      },

      // 长带参数
      listQuery: {
        page: 1,
        pagesize: 10
      },

      // 搜索字段
      search: {
        search_type: '1',
        outlet_info: '',
        status: ''
      },
      total: 0,
      listLoading: false,
      listData: []
    }
  },
  computed: {
    ...mapGetters(['set_page_params'])
  },

  filters: {
    statusFilter(status) {
      const statusMap = {
        // 0: 'info',
        0: 'danger',
        1: 'success',
        2: 'danger'
      }
      return statusMap[status]
    },
    statusName(status) {
      return (status === '1') ? '正常营业' : '暂停营业'
    },
    publishName(status) {
      return (status === '1') ? '开启中' : '已关闭'
    },
    paymentType(status) {
      return (status === '0') ? '在线/到付' : (status === '1') ? '在线付款' : '货到付款'
    }
  },

  // 初始化数据
  created() {
    if (Object.keys(this.set_page_params).length > 0) {
      this.listQuery = this.set_page_params
    }
    setTimeout(() => {
      this.fetchData()
    }, 100)
    this.$store.dispatch('setPageParams', {}) // 回归原来的状态
  },

  // 触动方法
  methods: {
    // 控制每页调数
    handleSizeChange(val) {
      this.listQuery.pagesize = val
      this.fetchData()
    },

    // 跳页
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.fetchData()
    },

    // 搜搜
    handleFilter() {
      this.listQuery.page = 1
      this.fetchData()
    },

    // 修改状态
    handleModifyStatus(row) {
      var data = {
        unit_id: row.id,
        change_field: 'status'
      }
      data.status = (row.status === '1') ? '2' : '1' //  状态,2冻结,1正常
      api.editHotelApi(data).then(response => {
        if (response.data.code === 0) {
          this.$root.message('操作成功', 'success')
          row.status = data.status
        }
      })
    },

    // 控制朋友圈状态的按钮 2018-10-01
    publishState(row) {
      var data = {
        unit_id: row.id,
        change_field: 'publish'
      }
      data.publish_state = (row.open_publish === '1') ? '0' : '1'
      api.editHotelApi(data).then(response => {
        if (response.data.code === 0) {
          this.$root.message('操作成功', 'success')
          row.open_publish = data.publish_state
        }
      })
    },

    // 营业点状态提交数据
    // postData(data, row) {
    //   api.editHotelApi(data).then(response => {
    //     if (response.data.code === 0) {
    //       this.$root.message('操作成功', 'success')
    //     }
    //   })
    // },

    // 添加
    handleCreate() {
      this.$nextTick(() => {
        this.$router.push({
          path: '/outlets/edit-outlet',
          name: 'editOutlet',
          query: { es: 'add' }
        })
      })
    },

    // 编辑
    handlEdit(row) {
      // 存在 vuex session
      this.$store.dispatch('setOutletInfo', row)
      // 返回原来的界面保存参数
      this.$store.dispatch('setPageParams', Object.assign(this.listQuery, this.search))
      this.$nextTick(() => {
        this.$router.push({
          path: '/outlets/edit-outlet',
          name: 'editOutlet',
          query: { es: 'edit' }
        })
      })
    },

    // 删除
    handlDel(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var params = {
          unit_id: row.id
        }
        api.delHotelApi(params).then(response => {
          if (response.data.code === 0) {
            const index = this.listData.indexOf(row)
            this.listData.splice(index, 1)
            this.$root.message('已移除指定营业点', 'success')
            this.total = this.total - 1
          }
        })
      }).catch(() => {
        this.$root.message('已取消删除', 'info')
      })
    },

    // 获取数据
    fetchData() {
      this.listLoading = true
      this.listQuery = Object.assign(this.listQuery, this.search)
      return new Promise((resolve, reject) => {
        api.hotelListApi(this.listQuery).then(response => {
          if (response.data.code === 0) {
            this.listData = response.data.data
            this.total = parseInt(response.data.total)
          }
          this.listLoading = false
        })
      })
    },

    // 下载二维码
    downCodeZip(v) {
      const params = {
        unit_id: v.id
      }
      return new Promise((resolve, reject) => {
        api.downZipApi(params).then(response => {
          if (response.data.code === 0) {
            var url = response.data.data
            window.location.href = url // 在原标签页打开
            this.$root.message('下载成功', 'success')
          }
        })
      })
    }

  }
}
</script>
